<template>
  <div>
    <div :style="{'background-color': mBackground+'!important'}" :class="['small-box', style]">
      <div class="inner">
        <h3 :style="contentStyle">{{ value }}</h3>
        <p>{{ widget.name }}</p>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'KpiContent',
  props: {
  	widget: {
  		type: Object,
  		required: true
  	},
    filters: {
      type: Array,
      default() {
        return []
      }
    },
    mBackground: {
      type: String
    }
  },
  data() {
  	return {
      loading: true,
      widgetData: {},
  		value: '',
  		style: '',
      contentStyle: {
        fontSize: '',
        color: '',
        textAlign: '',
        lineHeight: ''
      }
  	}
  },
  methods: {
    initByWidget(seriesData) {
      this.widgetData = this.widget.widget.data;
      const format = this.widgetData.config.values[0].format;
      const style = this.style = this.widgetData.config.values[0].style || 'bg-aqua';

      /*----------获得 option，用于调整图表样式----------*/
      let styleOption = this.widget.widget.data.config.option || {};

      if(typeof styleOption === 'object' && typeof styleOption.font === 'object') {
        if(styleOption.font.size) this.contentStyle.fontSize = parseFloat(styleOption.font.size) + 'px';
        if(styleOption.font.align) this.contentStyle.textAlign = styleOption.font.align;
        if(styleOption.font.color) this.contentStyle.color = styleOption.font.color;
        if(styleOption.font.lineHeight) this.contentStyle.lineHeight = parseFloat(styleOption.font.lineHeight) + 'px';
      }
      
      console.log(seriesData)

      if(seriesData.data[0][0] === null || seriesData.data[0][0] === undefined) {
        this.value = 'No Data';
      }else {
        this.value = this.$numbro(seriesData.data[0][0]).format(format);
      }
    },
    refresh() {
      this.initByWidget(true);
    }
  }
}
</script>

<style>
.small-box-footer span {
  margin-right: 8px;
  cursor: pointer;
}
</style>
